<template>
  <div class="server_list">
    <Card>
		<!-- 搜索部分 -->
		<div class="top">
			<Select v-model="gId" style="width: 200px;margin-right: 30px;">
				<Option v-for="item in serverList" :value="item.gId" :key="item.seq">{{ item.groupName }}</Option>
			</Select>
			<Input v-model="ip" placeholder="输入IP地址进行搜索" style="width: 200px" />
			<Input v-model="osInfo" placeholder="输入服务器名称进行搜索" style="width: 200px" />
			<Button type="primary" @click="search()" class="large" style="padding:0 40px">搜索</Button>
		</div>
		<!-- 搜索部分结束 -->
		<!-- 工单列表 -->
		<Table :columns="columns" :data="tableData"></Table>
		<div class="center">
			<div class="pageBox">
				<Page :total="count" show-total :page-size ="pageSize" @on-change="handlePage"/>
			</div>
		</div>
		<Modal v-model="show" width="1200" class="detail_model" :mask-closable="false" :footer-hide="true" @on-cancel="stopGetDetailData">
			<p slot="header" class="detail_title">
				<ul>
					<li v-for="(item, index) in detailsTitle" :key="index">
						<div class="label">
							{{item.label}}
						</div>
						<div class="name">
							{{item.name}}
						</div>
					</li>
				</ul>
			</p>
			<Row>
				<Col span="12" class="echartsBox">
					<div class="eTitle">
						CPU 使用率（%）
					</div>
					<div class="echarts" id="cpuInfo"></div>
				</Col>
				<Col span="12" class="echartsBox">
					<div class="eTitle">
						内存使用量（G）
					</div>
					<div class="echarts" id="memInfo"></div>
				</Col>
			</Row>
			<div class="echartsBox">
				<div class="eTitle">
					硬盘使用量（G）
				</div>
				<div class="echarts group" v-for="(item, index) in diskList" :id="item" :key="index">
					{{item}}
				</div>
			</div>
			<div class="echartsBox">
				<div class="eTitle">
					网络流量（KB）
				</div>
				<div class="echarts group" v-for="(item, index) in netList" :id="item" :key="index">
					{{item}}
				</div>
			</div>
		</Modal>
		<Modal v-model="change_show" title="硬件变更记录" class="detail" footer-hide width="800">
			<div class="box" v-for="(item, index) in changeList" :key="index">
				<template v-if="index % 2 === 0">
					<div class="left date">
						{{fommateTime(item.createTime)}}
					</div>
					<div class="right detailBox">
						<ul>
							<li>
								<span class="label">
									名称
								</span>
								<span class="text" :title="item.osInfo">
									{{item.osInfo}}
								</span>
							</li>
							<li>
								<span class="label">
									分组
								</span>
								<span class="text" :title="item.gId">
									{{item.gId}}
								</span>
							</li>
							<li>
								<span class="label">
									CPU
								</span>
								<span class="text" :title="item.cpuInfo">
									{{item.cpuInfo}}
								</span>
							</li>
							<li>
								<span class="label">
									内存
								</span>
								<span class="text" :title="item.memInfo">
									{{item.memInfo}}
								</span>
							</li>
							<li>
								<span class="label">
									硬盘
								</span>
								<span class="text" :title="item.diskInfo">
									{{item.diskInfo}}
								</span>
							</li>
						</ul>
					</div>
				</template>
				<template v-else>
					<div class="left detailBox">
						<ul>
							<li>
								<span class="label">
									名称
								</span>
								<span class="text" :title="item.osInfo">
									{{item.osInfo}}
								</span>
							</li>
							<li>
								<span class="label">
									分组
								</span>
								<span class="text" :title="item.gId">
									{{item.gId}}
								</span>
							</li>
							<li>
								<span class="label">
									CPU
								</span>
								<span class="text" :title="item.cpuInfo">
									{{item.cpuInfo}}
								</span>
							</li>
							<li>
								<span class="label">
									内存
								</span>
								<span class="text" :title="item.memInfo">
									{{item.memInfo}}
								</span>
							</li>
							<li>
								<span class="label">
									硬盘
								</span>
								<span class="text" :title="item.diskInfo">
									{{item.diskInfo}}
								</span>
							</li>
						</ul>
					</div>
					<div class="right date">
						{{fommateTime(item.createTime)}}
					</div>
				</template>
			</div>
		</Modal>
    </Card>
  </div>
</template>

<script>
import echarts from 'echarts'
export default {
  data () {
    return {
		// 列表头部配置
		columns: [
			{
				title: '服务器名称',
				key: 'osInfo'
			},
			{
				title: 'IP地址',
				key: 'ip'
			},
			{
				title: 'CPU信息',
				key: 'cpuInfo'
			},
			{
				title: '内存信息',
				key: 'memInfo'
			},
			{
				title: '硬盘信息',
				key: 'diskInfo'
			},
			{
				title: '上报状态',
				key: 'allow',
				render: (h, params) => {
					if (params.row.allow === 1) {
						return h('span', ' 允许上报')
					}
					if (params.row.allow === 0) {
						return h('span', ' 不允许上报 ')
					}
				}
			},
			{
				title: '分组',
				key: 'gId',
				render: (h, params) => {
					for (var i = 0; i < this.serverList.length; i++) {
						if (params.row.gId === this.serverList[i].gId) {
							return h('span', this.serverList[i].groupName)
						}
					}
				}
			},
			{
				title: '服务器状态',
				key: 'state',
				render: (h, params) => {
					if (params.row.state === 1) {
						return h('span', ' 下线')
					}
					if (params.row.state === 0) {
						return h('span', '正常')
					}
				}
			},
			{
				title: '操作',
				key: 'handle',
				render: (h, params) => {
					if (params.row.state === 1 || params.row.allow === 0) {
						return h('div', [
							h('Button', {
								props: {
									type: 'text',
									size: 'small'
								},
								attrs: {
									disabled: 'disabled'
								},
								style: {
									margin: '5px',
									background: 'url(../../../../static/images/see.png) no-repeat',
									paddingLeft: '30px'
								},
								on: {
									click: () => {
										this.show = true
										this.detailsTitle = [
											{
												label: '名称',
												name: params.row.osInfo
											},
											{
												label: 'CPU',
												name: params.row.cpuInfo
											},
											{
												label: '内存',
												name: params.row.memInfo
											},
											{
												label: '硬盘',
												name: params.row.diskInfo
											}
										]
									}
								}
							}, '查看详情'),
							h('Button', {
								props: {
									type: 'text',
									size: 'small'
								},
								style: {
									margin: '5px',
									background: 'url(../../../../static/images/change.png) no-repeat',
									paddingLeft: '30px'
								},
								on: {
									click: () => {
										this.change_show = true
										this.getChange(params.row.osInfo, params.row.ip, params.row.gId)
									}
								}
							}, '硬件变更记录')
						])
					} else {
						return h('div', [
							h('Button', {
								props: {
									type: 'text',
									size: 'small'
								},
								style: {
									margin: '5px',
									background: 'url(../../../../static/images/see.png) no-repeat',
									paddingLeft: '30px'
								},
								on: {
									click: () => {
										this.show = true
										this.detailsTitle = [
											{
												label: '名称',
												name: params.row.osInfo
											},
											{
												label: 'CPU',
												name: params.row.cpuInfo
											},
											{
												label: '内存',
												name: params.row.memInfo
											},
											{
												label: '硬盘',
												name: params.row.diskInfo
											}
										]
										this.getDetails(params.row.osInfo, params.row.osInfo + params.row.ip)
										this.timer = setInterval(() => {
											this.getDetails(params.row.osInfo, params.row.osInfo + params.row.ip)
										}, 10000)
									}
								}
							}, '查看详情'),
							h('Button', {
								props: {
									type: 'text',
									size: 'small'
								},
								style: {
									margin: '5px',
									background: 'url(../../../../static/images/change.png) no-repeat',
									paddingLeft: '30px'
								},
								on: {
									click: () => {
										this.change_show = true
										this.getChange(params.row.osInfo, params.row.ip, params.row.gId)
									}
								}
							}, '硬件变更记录')
						])
					}
				}
			}
		],
		// 表格数据
		tableData: [],
		show: false,
		count: 0,
		pageSize: 5,
		page: 1,
		ip: '',
		osInfo: '',
		detail_show: true,
		change_show: false,
		serverList: [],
		gId: 0,
		// 详情对话框标题
		detailsTitle: '',
		// 变更列表
		changeList: [],
		// cpu图表数据
		cpuDate: [],
		// cpu图表x轴
		cpuX: [],
		// 内存图表数据
		memDate: [],
		// 内存图表x轴
		memX: [],
		// 硬盘图表列表
		diskList: [],
		// 硬盘图表数据
		diskDate: {},
		// 网络图表列表
		netList: [],
		// 网络图表数据
		netkDate: {},
		temp: {},
		timer: {}// 定时器
		}
  },
  methods: {
		// 分页页码跳转
		handlePage (value) {
			this.page = value
			this.getList()
		},
		// 搜索
		search () {
			if (this.gId === 0 && this.osInfo === '' && this.ip === '') {
				this.$Message.warning('请输入搜索条件')
			} else {
				this.getList()
			}
		},
		// 获取列表数据
		getList () {
			var searchItem = ''
			// 服务器名称不为空
			if (this.osInfo !== '') {
				searchItem += '&osInfo=' + this.osInfo
			}
			// ip不为空
			if (this.ip !== '') {
				searchItem += '&ip=' + this.ip
			}
			this.$api.get(0, '/sys/v2/systemInfo/page?page=' + this.page + '&limit=5&gId=' + this.gId + searchItem, {}, r => {
				if (r.data.code === 0) {
					this.tableData = r.data.data.data
					this.count = r.data.data.total
				}
			})
		},
		// 获取详情
		getDetails (osInfo, ID) {
			var sessionTemp = sessionStorage.serverData
			let obj = {}
			let hasFlag = true
			if (sessionTemp !== undefined) {
				obj = JSON.parse(sessionTemp)
			}
			if (obj[ID] === undefined) {
				obj[ID] = {}
				hasFlag = false
			}
			this.$api.get(0, '/sys/v2/realtimedata?hostName=' + osInfo, {}, r => {
				console.log(r)
				if (r.data.code === 0) {
					var cpuArry1 = r.data.data.cpuInfo.used
					var cpuArry2 = this.fommateTimeX(r.data.data.cpuInfo.time)
					var memArry1 = r.data.data.memInfo.used
					var memArry2 = this.fommateTimeX(r.data.data.memInfo.time)
					var diskArry = r.data.data.diskInfos
					var netArry = r.data.data.netInfos
					this.cpuDate = []
					this.cpuX = []
					this.memDate = []
					this.memX = []
					this.diskDate = []
					this.diskList = []
					this.netDate = []
					this.netList = []
					for (let a = 0; a < diskArry.length; a++) {
						this.diskList.push('diskInfo' + a)
					}
					for (let a = 0; a < netArry.length; a++) {
						this.netList.push('netInfo' + a)
					}
					// CPU图表展示
					if (hasFlag) {
						this.cpuDate = obj[ID].cpu.cpuDate
						this.cpuX = obj[ID].cpu.cpuX
						if (this.cpuDate.length < 5) {
							this.cpuDate.push(cpuArry1)
							this.cpuX.push(cpuArry2)
						} else {
							this.cpuDate.shift()
							this.cpuX.shift()
							this.cpuDate.push(cpuArry1)
							this.cpuX.push(cpuArry2)
						}
						this.line('cpuInfo', this.cpuDate, this.cpuX, 'CPU使用率')
						obj[ID].cpu.cpuDate = this.cpuDate
						obj[ID].cpu.cpuX = this.cpuX
					} else {
						this.cpuDate.push(cpuArry1)
						this.cpuX.push(cpuArry2)
						this.line('cpuInfo', this.cpuDate, this.cpuX, 'CPU使用率')
						obj[ID].cpu = {
							cpuDate: this.cpuDate,
							cpuX: this.cpuX
						}
					}
					// 内存图表执行
					if (hasFlag) {
						this.memDate = obj[ID].mem.memDate
						this.memX = obj[ID].mem.memX
						if (this.memDate.length < 5) {
							this.memDate.push(memArry1)
							this.memX.push(memArry2)
						} else {
							this.memDate.shift()
							this.memX.shift()
							this.memDate.push(memArry1)
							this.memX.push(memArry2)
						}
						this.line('memInfo', this.memDate, this.memX, 'CPU使用率', r.data.data.memInfo.total)
						obj[ID].mem.memDate = this.memDate
						obj[ID].mem.memX = this.memX
					} else {
						this.memDate.push(memArry1)
						this.memX.push(memArry2)
						this.line('memInfo', this.memDate, this.memX, 'CPU使用率', r.data.data.memInfo.total)
						obj[ID].mem = {
							memDate: this.memDate,
							memX: this.memX
						}
					}
					// 硬盘图表执行
					if (hasFlag) {
						this.diskDate = obj[ID].diskDate
						if (this.diskDate[0].diskUsed.length < 5) {
							for (var g = 0; g < this.diskDate.length; g++) {
								this.diskDate[g].diskUsed.push(parseFloat(diskArry[g].diskSize) - parseFloat(diskArry[g].diskFree))
								this.diskDate[g].diskX.push(this.fommateTimeX(diskArry[g].time))
							}
						} else {
							if (diskArry !== [] && diskArry !== null && diskArry !== undefined && diskArry !== '') {
								for (var h = 0; h < this.diskDate.length; h++) {
									this.diskDate[h].diskUsed.push(parseFloat(diskArry[h].diskSize) - parseFloat(diskArry[h].diskFree))
									this.diskDate[h].diskX.push(this.fommateTimeX(diskArry[h].time))
									this.diskDate[h].diskUsed.shift()
									this.diskDate[h].diskX.shift()
								}
							}
						}
						this.$nextTick(() => {
							for (var e = 0; e < this.diskDate.length; e++) {
									this.line('diskInfo' + e, this.diskDate[e].diskUsed, this.diskDate[e].diskX, '硬盘使用量', this.diskDate[e].diskSize)
							}
						})
						obj[ID].diskDate = this.diskDate
					} else {
						this.diskDate = diskArry
						for (var f = 0; f < this.diskDate.length; f++) {
							this.$set(this.diskDate[f], 'diskX', [])
							this.$set(this.diskDate[f], 'diskUsed', [])
							this.diskDate[f].diskUsed.push(parseFloat(diskArry[f].diskSize) - parseFloat(diskArry[f].diskFree))
							this.diskDate[f].diskX.push(this.fommateTimeX(diskArry[f].time))
						}
						this.$nextTick(() => {
							for (var e = 0; e < this.diskDate.length; e++) {
									this.line('diskInfo' + e, this.diskDate[e].diskUsed, this.diskDate[e].diskX, '硬盘使用量', this.diskDate[e].diskSize)
							}
						})
						obj[ID].diskDate = this.diskDate
					}
					// 网络图表执行
					if (hasFlag) {
						this.netDate = obj[ID].netDate
						if (this.netDate[0].x.length < 5) {
							for (var m = 0; m < this.netDate.length; m++) {
								this.netDate[m].rxData.push(netArry[m].rx)
								this.netDate[m].txData.push(netArry[m].tx)
								this.netDate[m].x.push(this.fommateTimeX(netArry[m].time))
							}
						} else {
							if (netArry !== [] && netArry !== null && netArry !== undefined && netArry !== '') {
								for (var o = 0; o < this.netDate.length; o++) {
									this.netDate[o].rxData.push(netArry[o].rx)
									this.netDate[o].txData.push(netArry[o].tx)
									this.netDate[o].x.push(this.fommateTimeX(netArry[o].time))
									this.netDate[o].txData.shift()
									this.netDate[o].rxData.shift()
									this.netDate[o].x.shift()
								}
							}
						}
						this.$nextTick(() => {
							for (var p = 0; p < this.netDate.length; p++) {
								this.lineDouble('netInfo' + p, this.netDate[p].rxData, this.netDate[p].txData, this.netDate[p].x)
							}
						})
						obj[ID].netDate = this.netDate
					} else {
						this.netDate = netArry
						for (var k = 0; k < this.netDate.length; k++) {
							this.$set(this.netDate[k], 'rxData', [])
							this.$set(this.netDate[k], 'txData', [])
							this.$set(this.netDate[k], 'x', [])
							this.netDate[k].rxData.push(this.netDate[k].rx)
							this.netDate[k].txData.push(this.netDate[k].tx)
							this.netDate[k].x.push(this.fommateTimeX(this.netDate[k].time))
						}
						this.$nextTick(() => {
							for (var l = 0; l < this.netDate.length; l++) {
								this.lineDouble('netInfo' + l, this.netDate[l].rxData, this.netDate[l].txData, this.netDate[l].x)
							}
						})
						obj[ID].netDate = this.netDate
					}
				}
				sessionStorage.serverData = JSON.stringify(obj)
			})
		},
		line (id, data, x, echartsName, max) {
			var option = {
        // 图表距盒子的距离
        grid: {
          x: 60,
          y: 50,
          x2: 60,
          y2: 30
        },
				xAxis: {
					data: x,
					axisLabel: {
						interval: 0
					},
					boundaryGap: false
				},
				tooltip: {
					trigger: 'axis'
				},
				yAxis: {
					type: 'value',
					splitLine: { // 网格线
						show: false
					},
					max: max
				},
				series: [{
					name: echartsName,
					type: 'line',
					data: data
				}]
			}
			// 基于准备好的dom，初始化echarts实例
      var element = document.getElementById(id)
      if (id === 'memInfo' || id === 'cpuInfo') {
        if (element) {
          var elW = element.style.width = 1200 - 650 + 'px'
          console.log(elW)
        }
      } else {
        if (element) {
          var elWs = element.style.width = 1200 - 120 + 'px'
          console.log(elWs)
        }
      }
			var myChart = echarts.init(document.getElementById(id))
			// 使用刚指定的配置项和数据显示图表。
			myChart.setOption(option)
		},
		lineDouble (id, rx, tx, x) {
			var option = {
        // 图表距盒子的距离
        grid: {
          x: 60,
          y: 50,
          x2: 60,
          y2: 50
        },
				xAxis: {
					data: x,
					axisLabel: {
						interval: 0
					},
					boundaryGap: false
				},
				tooltip: {
					trigger: 'axis'
				},
				yAxis: {
					type: 'value',
					splitLine: { // 网格线
						show: false
					}
				},
				series: [{
					name: '网络接收',
					type: 'line',
					data: rx
				},
				{
					name: '网络上传',
					type: 'line',
					data: tx
				}]
			}
			// 基于准备好的dom，初始化echarts实例
      var element = document.getElementById(id)
        if (element) {
          var elW = element.style.width = 1200 - 120 + 'px'
          console.log(elW)
        }
			var myChart = echarts.init(document.getElementById(id))
			// 使用刚指定的配置项和数据显示图表。
			myChart.setOption(option)
		},
		getChange (osInfo, ip, gId) {
			this.$api.get(0, '/sys/v2/configChange/list?osInfo=' + osInfo + '&ip=' + ip + '&gId=' + gId, {}, r => {
				if (r.data.code === 0) {
					this.changeList = r.data.data
				}
			})
		},
		// 格式化时间
		fommateTime (date) {
			var time = new Date(date)
			var year = time.getFullYear()
			var month = this.num(time.getMonth() + 1)
			var day = this.num(time.getDate())
			var hour = this.num(time.getHours())
			var mine = this.num(time.getMinutes())
			return year + '-' + month + '-' + day + ' ' + hour + ':' + mine
		},
		fommateTimeX (date) {
			var time = new Date(date)
			var hour = this.num(time.getHours())
			var mine = this.num(time.getMinutes())
			var s = this.num(time.getSeconds())
			return hour + ':' + mine + ':' + s
		},
		// 小于10加0
		num (nume) {
			if (nume < 10) {
				return '0' + nume
			} else {
				return nume
			}
		},
		// 关闭定时器
		stopGetDetailData () {
			window.clearInterval(this.timer)
		}
  },
  mounted () {
		this.$api.get(0, '/sys/v2/group/list', {}, data => {
			if (data.data.code === 0) {
				this.serverList = data.data.data
				this.gId = this.serverList[0].gId
				this.getList()
			}
		})
  },
	watch: {
		// 页面跳转再次执行
		'$route' (to, from) {
			this.getList()
		}
	}
}
</script>
